<template>
	<view>
		<!-- 提示框 -->
		<toast ref="toast"></toast>
		
		<view class="py-2">
			<uni-swiper-dot :info="info" :current="current" mode="round" :dots-styles="dotsStyles" field="content">
			<swiper autoplay :interval="3000" :duration="300"
			class="px-3" style="height: 200rpx;" @change="swiperChange">
				<swiper-item v-for="(item, index) in info" :key="index">
					<image :src="item.url" lazy-load
					style="height: 200rpx;" class="w-100 rounded-lg" 
					mode="aspectFill"/>
				</swiper-item>
			</swiper>
			</uni-swiper-dot>
		</view>
		
		<card title="为你推荐">
			<view class="f-list">
				<media-list type="two" v-for="(item,index) in list2"
				:key="index" :item="item" :index="index"></media-list>
			</view>
		</card>
		
		<view class="f-divider"></view>
		
		<card title="为你推荐">
			<view class="f-list">
				<media-list type="three" v-for="(item,index) in list3"
				:key="index" :item="item" :index="index"></media-list>
			</view>
		</card>
		
		<view class="f-divider"></view>
		
		<card title="为你推荐">
			<media-list type="one" v-for="(item,index) in list1"
			:key="index" :item="item" :index="index"></media-list>
		</card>
		
		
	</view>
</template>

<script>
	import uniSwiperDot from '@/components/uni-ui/uni-swiper-dot/uni-swiper-dot.vue';
	import mediaList from '@/components/common/media-list.vue';
	
	import $data from '@/common/test/data.js';
	
	export default {
		components: {
			uniSwiperDot,
			mediaList
		},
		data() {
			return {
				info: $data.getSwiper(),
				dotsStyles: {
					backgroundColor: 'rgba(0, 0, 0, .3)',
					border: '1px rgba(0, 0, 0, .3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
					selectedBorder: '1px rgba(0, 0, 0, .9) solid'
				},
				current: 0,
				
				list1:$data.getListOne(),
				list2:$data.getListTwo(),
				list3:$data.getListThree(),
			}
		},
		onLoad() {
			
		},
		methods: {
			swiperChange(e) {
				this.current = e.detail.current
			}
		}
	}
</script>

<style>
	
</style>
